<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark head">
          <div class="demo-input-suffix">
            <div>工单编号：</div>
            <el-input placeholder="请输入内容" v-model="taskCode"> </el-input>
          </div>
          <div class="demo-input-suffix">
            工单状态：
            <el-select v-model="status" placeholder="请选择">
    <el-option
      v-for="item in statusOptions"
      :key="item.statusId"
      :label="item.statusName"
      :value="item.statusId">
    </el-option>
  </el-select>
          </div></div
      ></el-col>
    </el-row>
    <el-row>
      <el-button-group class="fl">
  <el-button type="primary" class="prePage el-icon-circle-plus-outline" @click.native.prevent="dialogFormVisible = true">新建</el-button>
  <el-button type="primary" @click="dialogAlertVisible=true">工单配置</el-button>
</el-button-group>
<!-- 表单区域 -->
      <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="taskCode"
        label="工单编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="innerCode"
        label="设备编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="productTypeId"
        label="工单类型"
        width="150">
      </el-table-column>
      <el-table-column
        prop="createType"
        label="工单方式"
        width="150">
      </el-table-column>
      <el-table-column
        prop="taskStatus"
        label="工单状态"
        width="150">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="运营人员"
        width="150">
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="date"
        label="操作"
        width="100">
        <template><a href=":;javascript" >查看详情</a></template>
      </el-table-column>
      <template #append>共{{totalCount}}条记录  第 {{currentPage}}/{{totalPage}} 页<el-button-group class="fr">
  <el-button type="primary" class="prePage" ref="pageUp" @click="pageBack" :disabled="isBackDisabled">上一页</el-button>
  <el-button type="primary" ref="pageBack" @click="pageUp" :disabled="isUpDisabled">下一页</el-button>
</el-button-group></template>
    </el-table>
  </template></el-row>

  <!-- 表单弹出框 -->
  <el-dialog title="新增工单" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules="rules">
    <el-form-item label="设备编号" :label-width="formLabelWidth" prop="innerCode">
      <el-input v-model="form.innerCode" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="工单类型" :label-width="formLabelWidth" prop="productTypeId">
      <el-select v-model="form.productTypeId" placeholder="请选择">
    <el-option
      v-for="item in taskTypeList"
      :key="item.typeId"
      :label="item.typeName"
      :value="item.typeId">
    </el-option>
  </el-select>
    </el-form-item>
    <el-form-item label="补货数量" :label-width="formLabelWidth">
    </el-form-item>
    <el-form-item label="运营人员" :label-width="formLabelWidth" prop="userName">
      <el-select v-model="form.userName" placeholder="请选择">
    <el-option
      v-for="item in userOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </el-form-item>
    <el-form-item label="备注" :label-width="formLabelWidth" prop="note">
      <el-input v-model="form.note" autocomplete="off" type="textarea"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
<!-- 预警线弹框 -->
<el-dialog title="工单配置" :visible.sync="dialogAlertVisible">
<div class="demo-input-suffix">
  属性方式：
  <el-input
    v-model="alertValue">
    <template #suffix>
      <div class="modify">
        <el-button size="mini" icon="el-icon-arrow-down" @click="alertValue--"></el-button>
        <el-button size="mini" icon="el-icon-arrow-up" @click="alertValue++"></el-button>
      </div>
    </template>
  </el-input>
  <el-button-group>
  <el-button @click="cancel">取消</el-button>
  <el-button type="primary" @click="getTaskTypeList">确认</el-button>
</el-button-group>
</div>
</el-dialog>
  </div>
</template>

<script>
import { taskSearch, allTaskStatus, getTaskTypeList } from '@/api/taskService'
export default {
  data () {
    return {
      taskCode: '',
      taskState: '',
      tableData: [],
      totalPage: 0,
      totalCount: 0,
      currentPage: 1,
      isBackDisabled: true,
      isUpDisabled: false,
      statusOptions: [],
      status: '',
      dialogFormVisible: false,
      dialogAlertVisible: false,
      form: {
        innerCode: '',
        productTypeId: '',
        userName: '',
        note: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      rules: {
        innerCode: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
        productTypeId: [{ required: true, message: '请输入工单类型', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入运营人员', trigger: 'blur' }],
        note: [{ required: true, message: '请输入运营人员', trigger: 'blur' }]
      },
      alertValue: 50,
      taskTypeList: []
    }
  },
  async created () {
    this.getTaskList()
    const res = await allTaskStatus()
    this.statusOptions = res
    this.statusOptions.push({
      statusId: '',
      statusName: '全部'
    })
    this.getTaskTypeList()
  },
  methods: {
    pageUp () {
      this.currentPage++
      this.isBackDisabled = false
      if (this.currentPage === this.totalPage) {
        this.isUpDisabled = true
      }
      this.getTaskList()
    },
    pageBack () {
      this.currentPage--
      if (this.currentPage === 1) {
        this.isBackDisabled = true
      }
      this.getTaskList()
    },
    async getTaskList (status = '') {
      const res = await taskSearch({
        pageIndex: this.currentPage,
        pageSize: 10,
        isRepair: false,
        status
      })
      this.tableData = res.currentPageRecords
      this.tableData.forEach(i => {
        i.productTypeId = i.taskType.typeName
        i.taskStatus = i.taskStatusTypeEntity.statusName
        i.createType = i.createType === 0 ? '自动' : '手动'
      })
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
    },
    async getTaskTypeList () {
      const taskTypeList = await getTaskTypeList(this.alertValue)
      this.taskTypeList = taskTypeList
      this.dialogAlertVisible = false
    },
    cancel () {
      this.alertValue = 50
      this.dialogAlertVisible = false
    }
  },
  computed: {
  },
  watch: {
    status (val) {
      this.getTaskList(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500px;
}
.fr {
  float: right;
  display: flex;
  justify-content: space-between;
  width: 300px;
}
.fl {
  float: left;
}
.prePage {
  padding-right: 20px;
}
.modify {
  height: 30px;
  width: 30px;
  display: flex;
  flex-direction: column-reverse;
  .el-button {
    height: 50%;
    width: 100%;
  }
}
</style>
